<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%;  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);"
      :row-class-name="tableRowClassName"
    >
      <!-- 功能列 -->
      <el-table-column prop="Function" label="功能" width="220">
        <template #header>
          <div class="dark_word">
            功能
          </div>
        </template>
        <template #default="scope">
          <div class="dark_word">
            {{ scope.row.Function }}
          </div>
        </template>
      </el-table-column>

      <!-- 普通会员列 -->
      <el-table-column prop="Ordinary" label="Ordinary" width="400">
        <template #header>
          <div>
            普通会员
            <small>(个人版)</small>
          </div>
        </template>
        <template #default="scope">
          <div class="Ordinary-member-cell">
            {{ scope.row.Ordinary }}
          </div>
        </template>
      </el-table-column>

      <!-- 超级会员列 -->
      <el-table-column prop="Super" label="Super" >
        <template #header>
          <div>
            超级会员
            <small>(个人版)</small>
          </div>
        </template>
        <template #default="scope">
          <div class="super-member-cell">
            {{ scope.row.Super }}
          </div>
        </template>
      </el-table-column>

   
    </el-table>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

// 定义表格数据的接口
interface TableDataItem {
  Function: string;
  Ordinary: string;
  Super: string;
  Enterprise: string;
}

// 表格数据
const tableData = ref<TableDataItem[]>([
  // 示例数据
  {
    Function: '配音下载',
    Ordinary: '',
    Super: '',
    Enterprise: ''
  },
  {
    Function: '83款vip声音',
    Ordinary: '✅',
    Super: '✅',
    Enterprise: '✅'
  },
  {
    Function: '83款 情感声音',
    Ordinary: '-',
    Super: '✅',
    Enterprise: '✅'
  },
  {
    Function: '541款 SVIP声音',
    Ordinary: '-',
    Super: '✅',
    Enterprise: '✅'
  },
  {
    Function: '情感字符',
    Ordinary: '-',
    Super: '20w字符/月',
    Enterprise: '20w字符/月/席位'
  },
  {
    Function: '作品导出',
    Ordinary: '40天/次',
    Super: '80天/次',
    Enterprise: '160次/天/席位'
  },
  {
    Function: '音视频下载',
    Ordinary: '✅',
    Super: '✅',
    Enterprise: '✅'
  },
  {
    Function: '字幕生成',
    Ordinary: '--',
    Super: '120分钟/天',
    Enterprise: '120分钟/天/席位'
  },
  {
    Function: '',
    Ordinary: '',
    Super: '',
    Enterprise: ''
  },
  {
    Function: '调音工具',
    Ordinary: '',
    Super: '',
    Enterprise: ''
  },
  {
    Function: '多音纠错',
    Ordinary: '✅',
    Super: '✅',
    Enterprise: '✅'
  },
  {
    Function: '数字读音',
    Ordinary: '✅',
    Super: '✅',
    Enterprise: '✅'
  },
  {
    Function: '儿化音',
    Ordinary: '✅',
    Super: '✅',
    Enterprise: '✅'
  },
  {
    Function: '词语拖音',
    Ordinary: '✅',
    Super: '✅',
    Enterprise: '✅'
  },
  {
    Function: '局部变速',
    Ordinary: '✅',
    Super: '✅',
    Enterprise: '✅'
  },
  {
    Function: '顿挫调节',
    Ordinary: '✅',
    Super: '✅',
    Enterprise: '✅'
  },
  {
    Function: '插入停顿',
    Ordinary: '✅',
    Super: '✅',
    Enterprise: '✅'
  },
  {
    Function: '读音连续',
    Ordinary: '✅',
    Super: '✅',
    Enterprise: '✅'
  },
  {
    Function: '紧凑模式',
    Ordinary: '✅',
    Super: '✅',
    Enterprise: '✅'
  },
  {
    Function: '解说增强',
    Ordinary: '✅',
    Super: '✅',
    Enterprise: '✅'
  },
  {
    Function: '符号停顿',
    Ordinary: '✅',
    Super: '✅',
    Enterprise: '✅'
  },
  {
    Function: '声音特效',
    Ordinary: '✅',
    Super: '✅',
    Enterprise: '✅'
  },
  {
    Function: '',
    Ordinary: '',
    Super: '',
    Enterprise: ''
  },
  {
    Function: '文案工具',
    Ordinary: '',
    Super: '',
    Enterprise: ''
  },
  {
    Function: '敏感词检测',
    Ordinary: '✅',
    Super: '✅',
    Enterprise: '✅'
  },
  {
    Function: '近义词替换',
    Ordinary: '✅',
    Super: '✅',
    Enterprise: '✅'
  },
  {
    Function: '文案提取神器',
    Ordinary: '-',
    Super: '✅',
    Enterprise: '✅'
  },
  {
    Function: '批量提取',
    Ordinary: '✅',
    Super: '✅',
    Enterprise: '✅'
  },
  {
    Function: '',
    Ordinary: '',
    Super: '',
    Enterprise: ''
  },
  {
    Function: '创作工具',
    Ordinary: '',
    Super: '',
    Enterprise: ''
  },
  {
    Function: '人声分离',
    Ordinary: '-',
    Super: '✅',
    Enterprise: '✅'
  },
  {
    Function: '自动对轴',
    Ordinary: '-',
    Super: '120分钟/天',
    Enterprise: '120/天/席位'
  },
  {
    Function: '文案提取',
    Ordinary: '-',
    Super: '120分钟/天',
    Enterprise: '120分钟/天/席位'
  },
  {
    Function: '照片去水印',
    Ordinary: '-',
    Super: '✅',
    Enterprise: '✅'
  }
]);

// 行类名处理函数
const tableRowClassName = ({ row, rowIndex }: { row: TableDataItem; rowIndex: number }) => {
  if (rowIndex % 2 === 0) {
    return 'even-row';
  } else {
    return 'odd-row';
  }
};
</script>
<style>
/* 功能列标题样式 */
.function-header {
  color: rgb(218, 169, 63); /* 设置字体颜色 */
}

/* 普通会员单元格样式 */
.Ordinary-member-cell {
  color: rgb(218, 169, 63);
}

/* 超级会员单元格样式 */
.super-member-cell {
  color: rgb(141, 68, 35);
}

/* 企业会员单元格样式 */
.Enterprise-member-cell {
  color: rgb(120, 62, 196);
}

/* 偶数行背景色 */
.el-table .even-row {
  background-color: #e0e0e0;
}

/* 奇数行背景色 */
.el-table .odd-row {
  background-color: #ffffff;
}

/* 警告行样式 */
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

/* 成功行样式 */
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>